<template>
  <div class="basic-box">
    <el-form
      :model="alterForm"
      :rules="alterRules"
      v-loading="loading"
      ref="alterForm"
      size="small"
      label-position="right"
      label-width="auto"
    >
      <!-- <div class="basic-box-title">{{ labelData.merchantTitle }}</div> -->
      <el-row :gutter="20">
        <el-col :span="8" v-if="isAlterShow">
          <el-form-item label="商户号:" prop="rpiNo">
            <el-input
              class="haruyuki-width-100"
              type="text"
              v-model="alterForm.rpiNo"
              @change="rpiNoChange"
              :disabled="isAlterDisabledShow"
              placeholder="请输入商户号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="变更类型:" prop="changeType">
            <el-select
              class="haruyuki-width-100"
              size="small"
              v-model="alterForm.changeType"
              @change="alterChange"
              :disabled="isAlterDisabledShow"
              placeholder="请选择变更类型"
            >
              <el-option
                v-for="item in changeTypeOptions"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="alterForm.changeType !== '3'">
          <el-form-item label="通道选择:" prop="aisleCode">
            <el-select
              class="haruyuki-width-100"
              size="small"
              v-model="alterForm.aisleCode"
              @change="aisleChange"
              :disabled="isAlterDisabledShow"
              placeholder="请选择变更类型"
            >
              <el-option
                v-for="item in aisleList"
                :key="item.aisleCode"
                :label="item.aisleName"
                :value="item.aisleCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="(alterForm.aisleCode == 'A0000020'||alterForm.aisleCode == 'A0000013'||alterForm.aisleCode == 'A0000040'||alterForm.aisleCode == 'A0000041'||alterForm.aisleCode == 'A0000047') && (alterForm.changeType == '2')">
          <el-form-item label="费率类型:" prop="rateType">
            <el-select
              class="haruyuki-width-100"
              size="small"
              v-model="alterForm.rateType"
              :disabled="isAlterDisabledShow"
              placeholder="请选择费率类型"
            >
              <el-option
                v-for="item in changeRate"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { queryBasicAisleList } from "@/api/rb-service/posinfo/pos_info_details";
import { getDictionary } from "@/api/system/dict";
import moduleBasic from "@/views/rb-service/merrecord/component/module_basic";
import moduleCard from "@/views/rb-service/merrecord/component/module_card";
import moduleRate from "@/views/rb-service/merrecord/component/module_rate";


export default {
  props: {
    isAlterDisabledShow: {
      type: Boolean,
      default: false,
    },
    isBeforeAlter: {
      type: Boolean,
      default: false,
    },
    isAlterShow: {
      type: Boolean,
      default: false,
    },
    rpiNo: {
      type: String,
      default: ""
    }
  },
  components: {
    moduleBasic,
    moduleCard,
    moduleRate
  },
  data() {
    return {
      labelData: {
        merchantTitle: "商户信息",
        contentTitle: "",
      },
      loading: false,
      aisleList: [],
      alterForm: {
        rpiNo:  "",
        changeType:  "",
        aisleCode:  "",
        rateType: ""
      },
      alterRules: {
        rpiNo: [{ required: true, message: "请输入商户号", trigger: "blur" }],
        // rpiName: [
        //   { required: true, message: "请输入门头名称", trigger: "blur" },
        // ],
        changeType: [
          { required: true, message: "请选择变更类型", trigger: "blur" },
        ],
        aisleCode: [
          { required: true, message: "请选择通道", trigger: "blur" },
        ],
        rateType: [
          { required: true, message: "请选择费率类型", trigger: "blur" }
        ]
      },
      changeTypeOptions: [],
      isShow: true,
      changeRate:[]
    };
  },
  computed: {
  },
  watch: {
    "alterForm.rpiNo"(rpiNo) {
      /* 获取通道列表数据 */
      queryBasicAisleList(rpiNo).then((res) => {
        this.aisleList = res.data.data;
      });
    }
  },
  created() {
    if (this.rpiNo) {
      this.alterForm.rpiNo = this.rpiNo;
    }
    this.doGetDicts();
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "change_type" }).then((res) => {
        this.changeTypeOptions = res.data.data;
      });
      getDictionary({ code: "rate_type" }).then((res) => {
        this.changeRate = res.data.data;
      });
    },
    // /* 获取通道列表数据 */
    // getAisleInfo() {
    //   const _this = this;
    //   queryBasicAisleList(_this.alterForm.rpiNo).then((res) => {
    //     _this.aisleList = res.data.data;
    //   });
    // },
    /* 商户号 */
    rpiNoChange() {
      // this.getAisleInfo();
    },
    /* 变更类型 */
    alterChange(e) {
      this.labelData.contentTitle = this.changeTypeOptions[e].dictValue;
    },
    /* 通道选择 */
    aisleChange(val) {
      if((val !== 'A0000020' && val !== 'A0000013' || val !== 'A0000040' || val !== 'A0000041') && this.alterForm.changeType == '2'){
        this.alterForm.rateType = "";
      }
      // this.labelData.contentTitle = this.changeTypeOptions[e].dictValue;
      // if (e && this.alterForm.rpiNo && this.alterForm.changeType) {
      //   this.getMerhchantDetails(this.alterForm.rpiNo, this.alterForm.changeType, e);
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-box {
  // padding: 20px 40px 20px 0;
  padding: 20px;
  .basic-box-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
  }
}
.alter-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
}

.upload-img {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>